<template>
    <div id="CommonDialog" v-if="visible">
        <a-modal
            :title="title"
            :visible="visible"
            :class="['common-dialog', className]"
            :width="width"
            :maskClosable="closeOnClickModal"
            @cancel="beforeClose">
            <a-form-model v-if="Object.keys(form).length" ref="form" :model="form" :layout="layout" v-bind="formItemLayout">
                <template v-for="(item, index) in rowsList">
                    <a-form-model-item
                        v-if="$util.isShow(item.show)"
                        :label="item.label"
                        :prop="item.prop"
                        :key="index"
                        :rules="item.rules"
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        :required="item.required">
                        <a-select
                            v-if="item.el === 'select'"
                            v-model="form[item.prop]"
                            :mode="item.mode || 'default'"
                            :autoClearSearchValue="item.autoClearSearchValue || false"
                            :filterOption="filterOption"
                            :showSearch="item.showSearch || false"
                            :placeholder="item.placeholder"
                            :allowClear="item.clearable || false"
                            :disabled="item.showDisabled || false"
                            @blur="(val) => item.blurFun && item.blurFun(val)"
                            @search="(val) => item.search && item.search(val)"
                            @change="(val) => item.callback && item.callback(val)"
                            @popupScroll="(val)=>item.popupScroll && item.popupScroll(val)"
                        >
                            <a-select-option
                                v-for="option in item.options"
                                :key="option[item.optionValue || 'value'] || option[Object.keys(option).find(key => key.toLowerCase().includes('id'))]"
                                :value="option[item.optionValue || 'value'] || option[Object.keys(option).find(key => key.toLowerCase().includes('id'))]">
                                {{option[item.optionLabel || 'label']}}
                            </a-select-option>
                        </a-select>
                        <a-tree-select v-model="form[item.prop]"
                            show-search
                            v-else-if="item.el === 'treeSelect'"
                            style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            :placeholder="item.placeholder"
                            allow-clear
                            :multiple="item.mode || 'default'"
                            :disabled="item.showDisabled || false"
                            :replaceFields="item.replaceFields"
                            @search="(val)=>item.search && item.search(val)"
                            @change="(val)=>item.selectTreeData && item.selectTreeData(val)"
                        >
                            <a-icon slot="suffixIcon" type="smile" />
                            <template v-for="item in item.options">
                                <a-tree-select-node :key="item.id" :value="item.id+item.name" :title="item.name">
                                    <template v-for="items in item.childs" >
                                        <a-tree-select-node :key="items.id" :value="items.id+items.name" :title="items.name" />
                                    </template>
                                </a-tree-select-node>
                            </template>
                        </a-tree-select>
                        <a-tree-select v-model="form[item.prop]"
                            show-search
                            v-else-if="item.el === 'treeSelect2'"
                            style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            :placeholder="item.placeholder"
                            allow-clear
                            :multiple="item.mode || 'default'"
                            :disabled="item.showDisabled || false"
                            :replaceFields="item.replaceFields"
                            @search="(val)=>item.search && item.search(val)"
                            @change="(val)=>item.selectTreeData && item.selectTreeData(val)"
                        >
                            <a-icon slot="suffixIcon" type="smile" />
                            <template v-for="item in item.options">
                                <a-tree-select-node :key="item.id" :value="item.title" :title="item.name" :disabled="item.disabled">
                                    <template v-for="items in item.childs" >
                                        <a-tree-select-node :key="items.id" :value="items.title" :title="items.name" />
                                    </template>
                                </a-tree-select-node>
                            </template>
                        </a-tree-select>
                        <Ueditor
                            v-else-if="item.el === 'ue'"
                            :editorId="editorId"
                            :defaultMsg="form[item.prop]"
                            :config="ueConfig"
                            ref="ue">
                        </Ueditor>
                        <template v-else-if="item.el === 'daterange'">
                            <a-range-picker
                                v-model="form[item.prop]"
                                :show-time="{
                                    defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')]
                                }"
                                valueFormat="YYYY-MM-DD HH:mm:ss"
                                :disabled="item.showDisabled || false"
                            />
                        </template>
                        <template v-else-if="item.el === 'date'">
                            <a-date-picker
                                v-model="form[item.prop]"
                                value-format="yyyy-MM-DD HH:mm:ss"
                                :placeholder="item.placeholder"
                                :disabled="item.showDisabled || false"
                            />
                        </template>
                        <template v-else-if="item.el === 'day'">
                            <a-date-picker
                                v-model="form[item.prop]"
                                value-format="yyyy-MM-DD"
                                :placeholder="item.placeholder"
                                :disabled="item.showDisabled || false"
                            />
                        </template>
                        <template v-else-if="item.el === 'radio'">
                            <a-radio-group
                                v-model="form[item.prop]"
                                :options="item.option"
                                :disabled="$util.isDisabled(item.option.showDisabled)"
                                @change="(val) => item.callback && item.callback(item.prop, val)"
                            />
                        </template>
                        <template v-else-if="item.slot">
                            <slot :name="item.prop" :index="index"></slot>
                        </template>
                        <template v-else-if="item.el === 'inputNumber'">
                            <a-input-number
                                v-model="form[item.prop]"
                                :disabled="$util.isDisabled(item.showDisabled)"
                                :placeholder="item.placeholder"
                                :min="item.min || -Infinity"
                                :max="item.max || Infinity"
                                :formatter="item.formatter"
                                :parser="item.parser"
                                :class="{inputNumber:item.class}"
                                @change="(val) => item.callback && item.callback(item.prop, val)"
                            />
                        </template>
                        <template v-else-if="item.el === 'textarea'">
                            <a-textarea
                                v-model="form[item.prop]"
                                :placeholder="item.placeholder"
                                :auto-size="{ minRows: item.minRows || 3, maxRows: item.maxRows || Infinity }"
                            />
                        </template>
                        <a-input
                            v-else
                            v-model="form[item.prop]"
                            v-focus="item.autoFocus || false"
                            :type="item.type || 'text'"
                            :placeholder="item.placeholder"
                            :disabled="item.showDisabled || false"
                            :maxLength="item.maxlength || Infinity"
                            :autosize="item.autosize"
                            @change="(val) => item.callback && item.callback(item.prop, val)"
                        >
                            <template slot="prefix" v-if="item.prefix">{{item.prefix}}</template>
                            <template slot="suffix" v-if="item.suffix">{{item.suffix}}</template>
                        </a-input>
                    </a-form-model-item>
                </template>
                <slot name="detail"></slot>
            </a-form-model>
            <div v-else>
                <slot name="detail"></slot>
            </div>
            <div slot="footer" class="dialog-footer" v-if="showButton">
                <a-button @click="beforeClose">取 消</a-button>
                <a-button type="primary" :loading="isSubmit" @click="confirmHandle">确 定</a-button>
            </div>
            <div slot="footer" v-else></div>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import util from '@/util/util'
import { Validate } from '@/decorator'

@Component
export default class CommonDialog extends Vue {
    @Prop({ type: Boolean, default: false }) visible!: boolean
    @Prop({ type: String, default: '' }) title!: string
    @Prop({ type: Object, default: () => ({}) }) form!: any
    @Prop({ type: Object, default: () => ({}) }) rows!: any
    @Prop({ type: String, default: '520px' }) width!: string
    @Prop({ type: Boolean, default: true }) closeOnClickModal!: boolean
    @Prop({ type: String, default: 'horizontal', validator: value => ['horizontal', 'vertical', 'inline'].includes(value) }) layout!: string
    @Prop({ type: Object, default: null }) labelCol!: any
    @Prop({ type: Object, default: null }) wrapperCol!: any
    @Prop({ type: String, default: '' }) className!: string
    @Prop({ type: Boolean, default: true }) showButton!: boolean
    @Prop({ type: Boolean, default: false }) isSubmit!: boolean
    @Prop({ type: Object, default: () => ({ initialFrameWidth: null, initialFrameHeight: 300 }) }) ueConfig!: any

    $refs!: {form: HTMLFormElement, ue: any }
    editorId: string = 'editor'

    get rowsList () {
        return Object.keys(this.rows).map(key => Object.assign({ prop: key }, this.rows[key]))
    }

    get formItemLayout () {
        return this.layout === 'horizontal' ? {
            labelCol: this.labelCol || { span: 4 },
            wrapperCol: this.wrapperCol || { span: 20 }
        } : {}
    }

    // 确定
    @Validate('form')
    confirmHandle () {
        if (!this.$refs.form) {
            this.$emit('confirm')
            return
        }
        let isUE = this.rowsList.find(item => item.el && item.el === 'ue')
        if (isUE) this.form[isUE.prop] = Array.isArray(this.$refs.ue) ? this.$refs.ue[0].getUEContent() : this.$refs.ue.getUEContent();
        this.$emit('confirm')
    }
    // 关闭dialog前
    beforeClose () {
        this.$emit('hideDialog', false)
    }
    resetForm () {
        this.$refs.form.resetFields()
    }
    // 过滤
    filterOption (value:any, option:any) {
      return option.componentOptions.children[0].text.indexOf(value) >= 0
    }

    @Watch('visible')
    watchVisible () {
        this.visible && this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate()
        })
    }
}
</script>

<style lang="scss">
.common-dialog {
    /deep/.ant-input-number {
        width: 100%;
    }
    .inputNumber{
        width: 200px !important;
    }
}
.dialog-footer {
    display: flex;
    justify-content: space-around;
    button {
        padding: 0px 50px;
    }
}
</style>
